<template>
	<div class="upload">
		<slot></slot>
		<input type="file" ref="fileUpload" id="fileUpload" :accept="accept" @change="fileChange($event)" />
	</div>
</template>
<script>
import axios from "axios"

export default {
	props: {
		accept: String,
	},
	data() {
		return {
			timeout: "",
			partSize: "",
			parallel: "",
			retryCount: "",
			retryDuration: "",
			region: "cn-shanghai",
			userId: "1841608742717239",
			file: null,
			uploadDisabled: true,
			resumeDisabled: true,
			pauseDisabled: true,
			uploader: null,
			uploadInfo: null,
		}
	},
	methods: {
		fileChange(e) {
			this.file = e.target.files[0]
			var Title = this.file.name
			if (this.uploader) {
				this.uploader.stopUpload()
			}
			var userData = '{"Vod":{}}'
			this.uploader = this.createUploader()
			this.uploader.addFile(this.file, null, null, null, userData)
			this.uploadDisabled = false
			this.pauseDisabled = true
			this.resumeDisabled = true
		},
		authUpload() {
			// 然后调用 startUpload 方法, 开始上传
			if (this.uploader !== null) {
				this.uploader.startUpload()
				this.uploadDisabled = true
				this.pauseDisabled = false
			}
		},
		// 暂停上传
		pauseUpload() {
			if (this.uploader !== null) {
				this.uploader.stopUpload()
				this.resumeDisabled = false
				this.pauseDisabled = true
			}
		},
		// 恢复上传
		resumeUpload() {
			if (this.uploader !== null) {
				this.uploader.startUpload()
				this.resumeDisabled = true
				this.pauseDisabled = false
			}
		},
		createUploader(type) {
			let self = this
			let uploader = new AliyunUpload.Vod({
				timeout: self.timeout || 60000,
				partSize: self.partSize || 1048576,
				parallel: self.parallel || 5,
				retryCount: self.retryCount || 3,
				retryDuration: self.retryDuration || 2,
				region: self.region,
				userId: self.userId,
				// 添加文件成功
				addFileSuccess: function(uploadInfo) {
					self.uploadDisabled = false
					self.resumeDisabled = false
					console.log("addFileSuccess: " + uploadInfo.file.name)
					self.authUpload()
				},
				// 开始上传
				onUploadstarted: function(uploadInfo) {
					// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
					// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
					// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
					// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
					// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
					// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
					if (!uploadInfo.videoId) {
						let createUrl = "/api/open/wujing/get-access-token"
						axios
							.post(createUrl, {
								filename: self.file.name,
								title: self.file.name,
							})
							.then(({ data }) => {
								let uploadAuth = data.data.UploadAuth
								let uploadAddress = data.data.UploadAddress
								let videoId = data.data.VideoId
								uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
							})
						console.log(
							"onUploadStarted:" +
								uploadInfo.file.name +
								", endpoint:" +
								uploadInfo.endpoint +
								", bucket:" +
								uploadInfo.bucket +
								", object:" +
								uploadInfo.object
						)
					} else {
						// 如果videoId有值，根据videoId刷新上传凭证
						// https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
						let refreshUrl = "/api/open/wujing/refresh-access-token"
						axios
							.post(refreshUrl, {
								filename: self.file.name,
								title: self.file.name,
							})
							.then(({ data }) => {
								let uploadAuth = data.data.UploadAuth
								let uploadAddress = data.data.UploadAddress
								let videoId = data.VideoId
								uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
							})
					}
				},
				// 文件上传成功
				onUploadSucceed: function(uploadInfo) {
					self.uploadInfo = uploadInfo
					console.log(
						"onUploadSucceed: " +
							uploadInfo.file.name +
							", endpoint:" +
							uploadInfo.endpoint +
							", bucket:" +
							uploadInfo.bucket +
							", object:" +
							uploadInfo.object
					)

					self.$emit("on-upload-succeed")
				},
				// 文件上传失败
				onUploadFailed: function(uploadInfo, code, message) {
					console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)

					self.$emit("on-upload-faild")
				},
				// 取消文件上传
				onUploadCanceled: function(uploadInfo, code, message) {
					console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
				},
				// 上传凭证超时
				onUploadTokenExpired: function(uploadInfo) {
					// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
					// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
					// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
					let refreshUrl =
						"https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=" +
						uploadInfo.videoId
					axios.get(refreshUrl).then(({ data }) => {
						let uploadAuth = data.UploadAuth
						uploader.resumeUploadWithAuth(uploadAuth)
						console.log("upload expired and resume upload with uploadauth " + uploadAuth)
					})
				},
				// 全部文件上传结束
				onUploadEnd: function(uploadInfo) {
					self.$emit("on-upload-end", self.uploadInfo)
				},
			})
			return uploader
		},
	},
}
</script>

<style scoped>
#fileUpload {
	display: none;
}
</style>
